<template>
  <div class="swap">
    <div class="content_wrap">
      <div class="login_swap" @click="gotoHome">
        <div class="back_icon">
          <i class="iconfont">&#xe650;</i>
        </div>
      </div>
      <div class="content_swap">
        <h1>硅谷外卖</h1>
      </div>
      <div class="input-swap">
        <van-tabs v-model="active" title-active-color="#02a774">
          <van-tab title="短信登陆">
            <van-form>
              <van-field
                v-model="query.phone"
                clearable
                autosize
                class="sendSize"
                placeholder="请输入手机号"
                :rules="[
                  {
                    pattern: /^1[3|4|5|7|8]\d{9}$/,
                    message: '请输入正确的手机号'
                  }
                ]"
              >
                <button
                  slot="button"
                  :disabled="disabled"
                  :class="
                    /^1[3|4|5|7|8]\d{9}$/.test(this.query.phone)
                      ? 'right_btn'
                      : 'getSizes'
                  "
                  @click.prevent="getCodeSizes"
                >
                  {{ timer > 0 ? `已发送${timer}s` : `${title}` }}
                </button>
              </van-field>
              <van-field
                v-model="query.code"
                placeholder="验证码"
                clearable
                autosize
                :rules="[{ pattern: /^\d{6}$/, message: '请填写正确的验证码' }]"
              />
              <div class="text">
                <p>
                  温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意。
                </p>
              </div>
              <div style="margin: 16px;">
                <van-button round block type="primary" @click="goToLogin"
                  >登录</van-button
                >
              </div>
              <span class="about_text"><a href="#">关于我们</a></span>
            </van-form>
          </van-tab>
          <van-tab title="密码登录">
            <van-form>
              <van-field
                v-model="pwdQuery.name"
                clearable
                autosize
                placeholder="手机/邮箱/用户名"
                :rules="[{ required: true, message: '请填写正确信息' }]"
              />
              <van-field
                v-model="pwdQuery.pwd"
                :type="showPwd"
                name="请输入密码"
                placeholder="请输入密码"
                clearable
                autosize
                :rules="[
                  {
                    pattern: /^[a-zA-Z0-9_-]{6,16}$/,
                    message: '请输入正确密码'
                  }
                ]"
              >
                <div slot="button">
                  <van-switch
                    v-model="switchChecked"
                    size="20"
                    @click="tagSwitchChecked"
                  />
                </div>
              </van-field>
              <van-field
                placeholder="验证码"
                clearable
                v-model="pwdQuery.captcha"
                autosize
                :rules="[{ required: true, message: '格式不正确' }]"
                class="van_cap"
              >
                <div slot="button" class="icon_img">
                  <!-- 图片验证码 -->
                  <img
                    src="http://localhost:4000/captcha"
                    @click="getPicCode"
                  />
                </div>
              </van-field>
              <div style="margin: 16px;">
                <van-button
                  class="log_txt"
                  @click="goToPwdLogin"
                  round
                  block
                  type="primary"
                  >登录</van-button
                >
              </div>
              <span class="about_text"><a href="#">关于我们</a></span>
            </van-form>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { reqPhoneCode, reqLogin, reqPhoneLogin } from '../../api'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      active: 0,
      timer: 0,
      disabled: false,
      title: '获取验证码',
      // 密码框开关
      switchChecked: false,
      // 密码状态
      showPwd: 'password',
      // 短信登陆
      query: {
        phone: '',
        code: ''
      },
      // 密码登录参数
      pwdQuery: {
        // 用户名
        name: '',
        pwd: '',
        // 验证码
        captcha: ''
      }
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['addUsers(data)']),
    // ...mapActions(['addUsersAsync(data)']),
    gotoHome() {
      this.$router.push('/msite')
    },
    // 点击获取验证码
    async getCodeSizes() {
      const regPhone = /^1[3|4|5|7|8]\d{9}$/.test(this.query.phone)
      this.disabled = true
      if (regPhone) {
        this.timer = 60
        this.stopTimer = setInterval(() => {
          this.timer--
          if (this.timer < 0) {
            clearInterval(this.stopTimer)
            this.disabled = false
          }
        }, 1000)
        // 发送短信验证码
        const res = await reqPhoneCode(this.query.phone)
        if (res.code === 1) {
          // 显示提示
          this.$toast.fail(res.msg)
          // 停止计时
          if (this.timer) {
            this.timer = 0
            clearInterval(this.stopTimer)
          }
        }
      }
    },
    // 点击切换开关
    tagSwitchChecked() {
      if (this.switchChecked) {
        this.showPwd = 'password'
      } else {
        this.showPwd = ''
      }
    },

    // 获取图片动态验证码
    getPicCode(event) {
      // 通过改变当前的时间进行切换图片
      event.target.src = 'http://localhost:4000/captcha?time=' + Date.now()
    },
    // 短信登录
    async goToLogin() {
      const res = await reqPhoneLogin(this.query)
      if (res.code === 0) {
        const resPhone = res.data
        this.$store.dispatch('addUsersAsync', resPhone)
        this.$router.push('/profile')
        this.$toast.success('登录成功')
      } else {
        this.$toast.fail(res.msg)
        this.query.phone = ''
        this.query.code = ''
      }
    },
    // 密码登录
    async goToPwdLogin() {
      // 全局验证
      const res = await reqLogin(this.pwdQuery)
      if (res.code === 0) {
        const data = res.data
        this.$store.dispatch('addUsersAsync', data)
        this.$toast.success('登陆成功')
        this.$router.push('/profile')
      } else {
        this.$toast.fail(res.msg)
        this.pwdQuery.name = ''
        this.pwdQuery.captcha = ''
        this.pwdQuery.pwd = ''
      }
    }
  }
}
</script>

<style lang="less">
.van-button__text {
  font-size: 0.633333rem;
}
.icon_img {
  img {
    height: 1.066667rem;
    width: 4rem;
  }
}
.getSizes {
  color: #ccc;
  padding-right: 0.266667rem;
  .right_btn {
    color: black !important;
    padding-right: 0.266667rem;
  }
}
button {
  background-color: #fff;
}
.cap {
  position: absolute;
  right: 0;
}
.text {
  color: #02a774;
  font-size: 0.373333rem;
  line-height: 0.533333rem;
  letter-spacing: 0.053333rem;
  padding: 0.266667rem 0.166667rem;
}
.about_text {
  a {
    color: #999;
    font-size: 0.32rem;
    display: block;
    text-align: center;
  }
}
.content_wrap {
  width: 100%;
  height: 17.766667rem;
  overflow: hidden;
  background-color: #fff;
}
.swap {
  height: 100%;
}
.van-field__control {
  height: 1.08rem;
}
.van-tabs__content {
  padding: 0 0.9rem !important;
}
.content_swap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1.8rem;
  h1 {
    font-size: 1.066667rem;
    color: #02a774;
    font-weight: 600;
  }
}
.back_icon {
  margin-top: 0.133333rem;
  i {
    font-size: 0.533333rem;
    color: #999;
  }
}
.input-swap {
  margin-top: 3.066667rem;
}
</style>
